<template>
	<view class="region">
		<picker mode="multiSelector" :range="range" range-key="name" @change="change" @columnchange="columnchange"
			:value="value" :disabled="disabled">
			<view class="content" :class="{ placeholder: !regionStr }">
				<text class="ellipsis-1">{{ regionStr ? regionStr : placeholder }}</text>
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		/**
		 * 数据
		 */
		props: {
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},

			// placeholder
			placeholder: {
				type: String,
				default: '请选择省/市/区'
			},

			// 默认值
			defaultValue: {
				type: Array,
				default () {
					return null;
				}
			}

		},

		/**
		 * 数据
		 */
		data() {
			return {
				range: [
					[],
					[],
					[]
				],
				// 省/市/区
				// value 的值表示选择了 range 中的第几个（下标从 0 开始）,默认为 [0, 0, 0]，即 range 为 ['第一个省', '第一个省的第一个市', '第一个省的第一个市的第一个区']
				value: [0, 0, 0],
				regionStr: '', // 选中的省市区字符串
				regionData: []
			};
		},

		/**
		 * 监听数据
		 */

		watch: {
			// 默认值
			defaultValue() {
				// 设置/更新省市区数据
				this.defaultValue ? this.setDefaultValue() : this.setRange();
			}
		},

		/**
		 * 组件初次加载完成
		 */
		mounted() {
			// 设置/更新省市区数据
			this.defaultValue ? this.setDefaultValue() : this.setRange();
		},

		/**
		 * 函数
		 */
		methods: {

			/**
			 * 设置/更新省市区数据
			 */
			async setRange() {
				if (this.regionData.length == 0) {
					let res = await this.$myRequest({
						url: '/getAllArea',
						methods: 'post'
					}).then((res) => {
						if (res.data.status == 1) {
							this.regionData = res.data.data;
						}
					})
				}

				// 省市区数据
				let range = [
					[],
					[],
					[]
				];

				// 省
				this.regionData.forEach(el => {
					range[0].push({
						id: el.id,
						level: el.level,
						name: el.name,
						pid: el.pid
					});
				});

				// 市
				this.regionData[this.value[0]].children.forEach(el => {
					range[1].push({
						id: el.id,
						level: el.level,
						name: el.name,
						pid: el.pid
					});
				});

				// 区
				this.regionData[this.value[0]].children[this.value[1]].children.forEach(el => {
					range[2].push({
						id: el.id,
						level: el.level,
						name: el.name,
						pid: el.pid
					});
				});

				// 更新省市区数据
				this.range = range;
			},

			/**
			 * 设置默认值
			 */
			async setDefaultValue() {
				if (this.regionData.length == 0) {

					let res = await this.$myRequest({
						url: '/getAllArea',
						methods: 'post'
					}).then((res) => {
						if (res.data.status == 1) {
							this.regionData = res.data.data;
						}
					})
				}

				// 查找省
				let provinceIndex = this.regionData.findIndex(el => {
					return el.name == this.defaultValue[0];
				});
				if (provinceIndex < 0) provinceIndex = 0;

				// 查找市
				let cityIndex = this.regionData[provinceIndex].children.findIndex(el => {
					return el.name == this.defaultValue[1];
				});
				if (cityIndex < 0) cityIndex = 0;

				// 查找区
				let areaIndex = this.regionData[provinceIndex].children[cityIndex].children.findIndex(el => {
					return el.name == this.defaultValue[2];
				});
				if (areaIndex < 0) areaIndex = 0;

				// 更新 value 的值
				this.value = [provinceIndex, cityIndex, areaIndex];


				// 设置/更新省市区数据
				this.setRange();

				// 更新选中的省市区字符串
				this.regionStr =
					this.regionData[provinceIndex].name + '·' + this.regionData[provinceIndex].children[cityIndex]
					.name;
				if (this.regionData[provinceIndex].children[cityIndex].children[areaIndex].name) {
					this.regionStr += '·' + this.regionData[provinceIndex].children[cityIndex].children[areaIndex]
						.name;
				}
			},

			/**
			 * 某一列的值改变时触发
			 * @param {Number} event.detail.column 表示改变了第几列（下标从0开始）
			 * @param {Number} event.detail.value 表示变更值的下标
			 */
			columnchange(event) {
				// 改变的是省
				if (event.detail.column == 0) {
					this.value = [event.detail.value, 0, 0];
				}
				// 改变的是市
				if (event.detail.column == 1) {
					this.value.splice(1, 1, event.detail.value);
					this.value.splice(2, 1, 0);
				}
				// 改变的是区
				if (event.detail.column == 2) {
					this.value.splice(2, 1, event.detail.value);
				}

				// 设置/更新省市区数据
				this.setRange();
			},

			/**
			 * 确认选择
			 */
			change(event) {

				// 更新选中的省市区字符串
				this.regionStr = this.range[0][this.value[0]].name + '·' + this.range[1][this.value[1]].name + '·' + this
					.range[2][this.value[2]].name;

				// 传递事件
				this.$emit('change', [this.range[0][this.value[0]], this.range[1][this.value[1]], this.range[2][this.value[
					2]]]);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.ellipsis-1 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.content {
		text-align: right;
	}

	.placeholder {
		color: #949596;
	}
</style>
